{extend name='public/base'} 
{block name='content'}

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        {$item['item1']}
        <small>{$item['item2']}</small>
    </h1>
    <ol class="breadcrumb">
        <li>
            <a href="#">
                <i class="fa fa-dashboard"></i> {$item['item1']}</a>
        </li>
        <li class="active">{$item['item2']}</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">

    <blockquote class="layui-elem-quote layui-text clw">
        <form class="form-horizontal layui-form" action="{:url('admin/chart/cfcount')}" method="get">
            <div class="box-body" style="padding: 15px;">
                <div>
                    <div class="col-sm-2">
                        <select name="settled_id" id="settled_id" lay-filter="settled_id">
                            <option value="">所有诊所</option>
                        </select>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" id="test10" name="test10" class="form-control" placeholder="请选择处方日期">
                    </div>

                    <div class="col-sm-1">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-warm">搜索</button>
                    </div>
                    <div class="col-sm-1">
                        <button onclick="javascript:location.reload()" class="layui-btn layui-btn-sm layui-btn-warm">刷新</button>
                    </div>
                </div>
            </div>
        </form>
    </blockquote>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">统计</h3>
        </div>

        <div class="row" style="margin-bottom: 30px">
            <div class="layui-tab layui-tab-card tjdiv col-md-3" style="margin-left: 30px">
                <div class="layui-tab-content hdiv">
                    <div class="layui-tab-item layui-show">
                        总数量(单位：个)
                    </div>
                    <div class="layui-tab-item layui-show jehh">
                        <text style="font-size: 42px;color: brown">{$zsl}</text>
                    </div>
                </div>
            </div>

            <div class="layui-tab layui-tab-card tjdiv col-md-3" style="margin-left: 30px">
                <div class="layui-tab-content hdiv">
                    <div class="layui-tab-item layui-show">
                        总药费(单位：元)
                    </div>
                    <div class="layui-tab-item layui-show jehh">
                        <text style="font-size: 42px;color: brown">{$zyf}</text>
                    </div>
                </div>
            </div>

            <div class="layui-tab layui-tab-card tjdiv col-md-3" style="margin-left: 30px">
                <div class="layui-tab-content hdiv">
                    <div class="layui-tab-item layui-show">
                        总费用(单位：个)
                    </div>
                    <div class="layui-tab-item layui-show jehh">
                        <text style="font-size: 42px;color: brown">{$zfy}</text>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <i style="clear: both;"></i>
    <div class="row" id="main" style="height:500px;background: #ffffff"></div>
    <i style="clear: both;"></i>

    <!-- /.row -->
</section>
<!-- /.content -->

{/block} {block name='script'}
<script>
    //新增用户的模态框数据清除
    $("#addModal,#editModal").on('hide.bs.modal', function () {
        $('#addReset').click();
    });
    //加载缓冲动画
    $("#addModal,#editModal").on('show.bs.modal', function () {
        layer.closeAll();
    });

    //搜索显示所有诊所
    settlled('settled_id');

    // 获取小区列表
    function settlled(obj, id = 0) {
        $.ajax({
            type: 'POST',
            url: 'settlled',
            dataType: 'json',
            success: function (ret) {
                console.log("诊所", ret);
                if (ret.code == 200) {
                    var h = '<option value="" >请选择诊所</option>';
                    $.each(ret['data'], function (k, v) {
                        h += '<option value="' + v['id'] + '">' + v['clinic'] + '</option>'
                    });
                    $('#' + obj).html(h);
                    form.render();
                } else {
                    layer.msg(ret.msg, {
                        icon: 5,
                        time: 2000
                    });
                }
            },
            error: function (err) {
                var err_msg = err.responseText
                if (err_msg.status_code = 401);
                layer.msg("对不起,您没有该权限!");

            }
        });
    }
</script>

  <!-- 日期选择器 -->
  <script>
        layui.use('laydate', function(){
          var laydate = layui.laydate;
            //日期时间范围
            laydate.render({
              elem: '#test10'
              ,type: 'datetime'
              ,range: true
            });
        });
    </script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'wonderland');

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '处方金额统计'
        },
        tooltip: {},
        legend: {
            data: ['金额']
        },
        xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        },
        yAxis: {},
        series: [{
            name: '元',
            type: 'bar',
            data: [{$jf}]
        }]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
{/block}